<template>
  <div class="un-eseal">
    <el-image
      v-if="value"
      :src="value"
      fit="fill"
      class="un-eseal-image"
      :style="imgStyles"
    >
      <div slot="error" class="un-eseal-image-error">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>
    <span v-else class="un-eseal-empty">请配置电子签章</span>
  </div>
</template>

<script>
export default {
  name: "UnEseal",
  props: {
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 200,
    },
    right: {
      type: Number,
      default: 80,
    },
    top: {
      type: Number,
      default: 0,
    },
    value: String,
  },
  computed: {
    imgStyles() {
      return {
        width: `${this.width}px`,
        height: `${this.height}px`,
        right: `${this.right}px`,
        top: `${this.top}px`,
      };
    },
  },
  methods: {},
};
</script>

<style lang="scss">
.un-eseal {
  position: relative;
  .un-eseal-image {
    position: absolute;
    height: 100%;
    z-index: 9999;
    border: 1px solid #ccc;
  }
  .un-eseal-image-error {
    width: auto;
    height: 100%;
    display: inline-block;
  }
  .un-eseal-empty {
    color: #999;
  }
}
</style>
